define([
  'jquery',
  'underscore',
  'views/Modal',
  'hbs!template/upload/preview-modal'
],function($, _, Modal, template_modal){
  var PhotoAlbumModal = Modal.extend({
    
    events: {
      "click a.page":		"changePage"
/*      "click button[name=next]":   "next",
      "click button[name=prev]":   "prev" */
    },
    
    initialize: function(options) {
      _.bindAll(this,
		'close',
               'keyPressed'); 
      this.template = template_modal;
      this.collection.pagination.setLimit(1);
      this.collection.bind("pagination:offset", this.renderContain, this);
      // TODO Try to find another way to achieve this.
      $(document).bind('keyup.modal', this.keyPressed);
    },
    
    renderContain: function() {
      var data = this.collection.pagination.models()[0].toJSON();
      data.pagination = this.collection.pagination.info();
      $(this.el).html(this.template(data));      
      return this;
    },

    changePage: function(e) {
      e.preventDefault();
      var page = $(e.currentTarget).data("id") ? $(e.currentTarget).data("id") : 1;
      this.collection.pagination.setPage(page);
    },

    next: function() {
      this.collection.pagination.nextPage();
    },
    
    prev: function() {
      this.collection.pagination.prevPage();
    },

    keyPressed: function(evt) {
      if(evt.keyCode === 39) {
        this.next();
      } else if(evt.keyCode === 37) {
        this.prev();
      }
    }
  });

  return PhotoAlbumModal;
});
